<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	    <style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- mvvm  m:model数据    v:view 视图  vm: viewmodel 视图和数据的桥梁 -->
		{{}}:如果网速不好，刷新频率过快，会出现闪烁一下的问题
		指令：
		1.v-text：等同于{{}}，网速不好，刷新频率过快,不会出现闪烁问题
		        都会把原来的内容给覆盖
				把标签当做文本，识别不了标签
	    2.v-html：识别标签（慎用）
		3.v-cloak：使用小胡子语法，并且不会出闪烁问题
		         必须配合css,才能生效
				 [v-cloak]{
				 	display: none;
				 }
				 
	    4.v-pre：一些静态的内容不需要编辑加这个指令可以加快编辑
		       里面是什么样子的，就是什么样，不会进行编译
	    5.****v-model：双向数据绑定(视图改变--》数据改变---》视图改变)  
		              一般用于代替input的value
		6. v-once：只展示一次数据，以后不会更新
		<div id="app">
			{{msg}}
			{{num>10?"A":"B"}}
			
			<p v-text="msg">你好</p>
			<p v-text="con"></p>
			<p v-html="con"></p>
			
			<p v-cloak>{{msg}}</p>
			
		   <h1 v-pre>{{msg}}</h1>
		   
		   <input type="text" v-model="inpValue">
		   <h1>{{inpValue}}</h1>
		   <h1 v-once>{{inpValue}}</h1>
		   
		   <textarea rows="" cols="" v-model="inpValue"></textarea>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					msg:"hello",
					num:10,
					con:"<i>哈哈</i>",
					inpValue:"你好呀，白菜"
				}
			})
		</script>
	</body>
</html>
